<template>
  <div class="dashboard-container">
    <div class="welcome">
      <!-- <img src="https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646" alt=""> -->
      <img src="@/assets/welcome.png" alt="">
      <div class="welcome-name">欢迎登录业务管理系统！</div>
      <!-- <div @click="getClick">1231231231</div> -->
    </div>
    <!-- <div class="dashboard-text">name:{{ name }}</div>
    <div class="dashboard-text">roles:<div v-for="role in roles" :key="role">{{ role }}</div></div>
    <div v-for="num in assignment" :key="num.name">{{ num }}</div> -->
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'assignment'
    ])
  },
  mounted() {

  },
  methods: {
    getClick: function() {
      console.log(getToken())
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.welcome{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 60%;
    margin: 0 auto;
  }
.welcome img{
  width:100%;
  height: 100%;
  margin-top: 10%;
}
.welcome-name{
  display: inline-block;
  position: absolute;
  color: blue;
  font-size: 25px;
  margin-top: 2%;
  color: #409EFF !important;
  font-weight: bold;
}
</style>
<style rel="stylesheet/scss" lang="scss">
$backgroundColor:#F2F6FC;
  /* .app-head{
    background-color: $backgroundColor;
    // padding:20px;
  } */
  .main-button{
    right: 80px;
    top: 5px;
  }
  .el-table{
    text-align: center
  }
  .el-table th>.cell{
    text-align: center !important
  }
  .pagination-container{
    width: 900px !important;
    margin: 20px auto !important;
  }
  .pagination-container span{
  }
  .el-pager li{
  }
</style>
